<template>
  <el-dropdown
    trigger="click"
    class="international"
    @command="handleSetLanguage"
  >
    <div>
      <el-tooltip :content="$t('msg.navBar.lang')" :effect="effect">
        <svg-icon id="guide-lang" icon="language" />
      </el-tooltip>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item :disabled="language === 'zh'" command="zh">
          中文
        </el-dropdown-item>
        <el-dropdown-item :disabled="language === 'en'" command="en">
          English
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup>
import { useI18n } from "vue-i18n";
import { defineProps, computed } from "vue";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";

defineProps({
  effect: {
    type: String,
    default: "dark",
    validator: function (value) {
      // 这个值必须匹配下列字符串中的一个
      return ["dark", "light"].includes(value);
    },
  },
});

const store = useStore();
const language = computed(() => store.getters.language);
// 切换语言的方法
const i18n = useI18n();
const handleSetLanguage = (lang) => {
  i18n.locale.value = lang;
  store.commit("app/setLanguage", lang);
  // ElMessage.success(`语言成功切换为${lang === "zh" ? "中文" : "英文"}`);
  ElMessage.success(i18n.t("msg.toast.switchLangSuccess"));
};
</script>
